<template>
	<div class="earth">
		<div class="earthContainer" ref="earthContainer"></div>
		<Imagery></Imagery>

		<Toolbar></Toolbar>
		<component
			v-for="(tool, index) in tools"
			:is="tool.component"
			:ref="tool.ref"
			:_toolIndex="index"
			:key="_getToolID(tool)"
			:getBind="tool.item"
			:nextczm="tool.nextczm"
		></component>

		<GlobalColorPicker ref="colorPicker"></GlobalColorPicker>
	</div>
</template>
<script>
/* eslint-disable */
import './xbsjicon.css';
import './common.css';
import Imagery from './Imagery';
import Toolbar from './Toolbar';
import LabServer from './LabServer';
import GlobalColorPicker from './GlobalColorPicker';
//需要的模块是 修路 ，挡土墙，种树，挖坑，填充面，剖面
export default {
	components: {
		Imagery,
		Toolbar,
		GlobalColorPicker
	},
	data() {
		return {
			tools: []
		};
	},
	created() {
		this.$root._earthUI = this;
	},
	mounted() {
		console.log('aaaaaaaaaaaa');

		var earth = new XE.Earth(this.$refs.earthContainer,{infoBox: false});
		earth.camera.navigator.showCompass = true;
		//earth.czm.scene.globe.depthTestAgainstTerrain = true;
		this.$root._earth = earth;

		Cesium.GeoJsonDataSource.load("http://117.73.254.217:2221/resources/others/山东市级区划.geojson",{
			fill: new Cesium.Color(1, 1, 1, 0.1)
		}).then(function(dataSource) {
				earth._viewer.dataSources.add(dataSource);
				earth._viewer.flyTo(dataSource)
			});
		
		let url = "http://117.73.254.217:2221/resources/sddem"
		let terrain = {
				ref: url,
				czmObject: {
					xbsjType: 'Terrain',
					name: url,
					xbsjTerrainProvider: {
						type: 'XbsjCesiumTerrainProvider',
						XbsjCesiumTerrainProvider: {
							url: url,
							requestVertexNormals: true,
							requestWaterMask: true
						}
					}
				}
			};
			if (this.$root._earth.sceneTree.$refs[url]) {
				this.$root._earth.sceneTree.$refs[url].czmObject = terrain.czmObject;
			} else {
				this.$root._earth.sceneTree.root.children.push(terrain);
			}

		this._visObjs = [];

		//加载基础场景

		this._labServer = new LabServer('//lab.earthsdk.com/');

		var params = this.$route.params;

		console.log(params);
		//根据params来跳转
		if (params.type === '3dtiles' && typeof params.name === 'string') {
			var layer = new XE.Obj.Tileset(earth);
			layer.xbsjFromJSON({
				url: params.name
			});
			layer.flyTo();
		} else if (params.type === 'json') {
			var layer = new XE.Obj.GeoJSON(earth);
			layer.xbsjFromJSON({
				url: params.name
			});

			setTimeout(() => {
				layer.flyTo();
			}, 2000);
		} else {
			console.log('不支持的参数类型', params);
		}

		// this._labServer
		//   .queryScene("48bfcc00593511eba68e83ff594d7d82")
		//   .then(scene => {
		//     //解析场景内容
		//     var jc = JSON.parse(scene.content);

		//     earth.xbsjFromJSON(jc);

		//     console.log("加载场景成功:" + id);
		//   })
		//   .catch(ex => {
		//     console.log("query scene failed " + ex.message || ex);
		//   });
	},
	methods: {
		addSceneObject(czmObject) {
			//this.$root._earth.sceneTree.addSceneObject(czmObject);

			this._visObjs.push(czmObject);
		},
		clearVisObjs() {
			this._visObjs.forEach(v => {
				v.destroy();
			});
			this._visObjs = [];
		},
		_getToolID(tool) {
			if (!tool.guid) {
				tool.guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = (Math.random() * 16) | 0;
					var v = c === 'x' ? r : (r & 0x3) | 0x8;
					return v.toString(16);
				});
			}
			return tool.guid;
		},
		//显示对象的属性窗口
		showPropertyWindow(czmObject, options) {
			//一个对象可以弹出若干种不同类型的属性窗口,判定是哪种component
			//console.log("optionsaaaaaa");
			//默认是统一类型的属性窗口
			var component;
			// console.log(czmObject.ctrtype);
			//如果有外部配置
			if (options && (typeof options.component == 'string' || typeof options.component == 'object')) {
				component = options.component;
			}

			//如果没有comp，那么判断是否要弹出默认属性面板
			if (!component) {
				return;
			}
			//判定是否有属性窗口
			const index = this.tools.findIndex(e => {
				//类型不一致，直接返回
				if (e.component != component) return false;
				//绑定的对象一致的
				return e.item && e.item() === czmObject;
			});
			//，如果有放到最前
			if (index >= 0) {
				this._topWindow(index);
				return;
			}

			var guid = czmObject.guid || Cesium.createGuid();
			console.log('guid', guid);
			console.log('guid');
			if (typeof component == 'string') {
				guid += '_' + component;
			}
			//新建窗口
			this.tools.push({
				component: component,
				ref: guid,
				guid: guid + new Date(),
				item: () => {
					return czmObject;
				},
				//mrq添加
				nextczm: options && options.jsonSchema
			});
		},
		_topWindow(index) {
			if (index < 0 && index == this.tools.length - 1) return;

			const tool = this.tools[index];
			this.tools.splice(index, 1);
			this.tools.push(tool);
		},
		topWindow(window) {
			const index = window.$parent.$attrs._toolIndex;
			this._topWindow(index);
		},
		destroyTool(tool) {
			const index = tool.$attrs._toolIndex;
			if (index !== -1) {
				//const tool = this.tools[index];
				this.tools.splice(index, 1);
			}
		},
		confirm(info, ok, cancel) {
			this.confirmInfo = info;
			this.modal = true;
			this._ok = ok;
			this._cancel = cancel;

			//目前没有确认
			this._ok();
		},
		promptInfo(info, level) {
			console.log(info, level);
		}
	}
};
</script>
<style scoped>
.earth {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 195px;
	bottom: 0px;
}
.earthContainer {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
}
</style>
